/**
 * Created by dqwork on 2016/4/8.
 */

//宽10块，高20块，每块边长为20
var a = 20;
var width = 200;
var height = 400;
var canvas, context
var speed = 300;
var rand, state//正在下落的图形编号及变形编号
//所有可能的图形及其变形
var shap1 = [[[0, 0], [1, 0], [1, 1], [1, 2]], [[0, 1], [1, 1], [2, 1], [2, 0]], [[0, 0], [0, 1], [0, 2], [1, 2]], [[0, 0], [1, 0], [2, 0], [0, 1]]];
var shap2 = [[[0, 0], [0, 1], [0, 2], [1, 0]], [[0, 0], [1, 0], [2, 0], [2, 1]], [[0, 2], [1, 0], [1, 1], [1, 2]], [[0, 0], [0, 1], [1, 1], [2, 1]]];
var shap3 = [[[0, 0], [1, 0], [1, 1], [2, 1]], [[1, 0], [1, 1], [0, 1], [0, 2]], [[0, 0], [1, 0], [1, 1], [2, 1]], [[1, 0], [1, 1], [0, 1], [0, 2]]];
var shap4 = [[[0, 1], [1, 0], [1, 1], [2, 0]], [[0, 0], [0, 1], [1, 1], [1, 2]], [[0, 1], [1, 0], [1, 1], [2, 0]], [[0, 0], [0, 1], [1, 1], [1, 2]]];
var shap5 = [[[0, 0], [1, 0], [0, 1], [1, 1]], [[0, 0], [1, 0], [0, 1], [1, 1]], [[0, 0], [1, 0], [0, 1], [1, 1]], [[0, 0], [1, 0], [0, 1], [1, 1]]];
var shap6 = [[[0, 1], [1, 1], [2, 1], [1, 0]], [[0, 0], [0, 1], [0, 2], [1, 1]], [[0, 0], [1, 0], [2, 0], [1, 1]], [[1, 0], [1, 1], [0, 1], [1, 2]]];
var shap7 = [[[0, 0], [1, 0], [2, 0], [3, 0]], [[0, 0], [0, 1], [0, 2], [0, 3]], [[0, 0], [1, 0], [2, 0], [3, 0]], [[0, 0], [0, 1], [0, 2], [0, 3]]];
var shaps = [shap1, shap2, shap3, shap4, shap5, shap6, shap7];
//按键控制
var keymap = {
    'W': 0,
    'S': 1,
    'A': 2,
    'D': 3
}
var theBlock
var px = 0, py = 0
var rects = []
var int

var init = function () {
    context.clearRect(0, 0, width, height);
    for (var n = 0; n < rects.length; n++) {
        drawRect(rects[n][0], rects[n][1])
    }
}
//产生一个新的图形
var newBlock = function () {
    rand = parseInt(Math.random() * 7)
    state = parseInt(Math.random() * 4)
    theBlock = shaps[rand][state]
    drawBlock()
}
//游戏开始
var start = function () {
    canvas = document.getElementById('myCanvas')
    context = canvas.getContext('2d')
    init()
    newBlock()
    int = setInterval('down()', speed)
}
//画单个方形，坐标(i,j)
var drawRect = function (i, j) {
    context.strokeStyle = 'black'
    context.lineWidth = 0
    context.fillStyle = 'gray'
    var x = i * a
    var y = j * a
    context.fillRect(x, y, a, a)
    context.strokeRect(x, y, a, a)
}
//画正在下落的图形
var drawBlock = function () {
    for (var n = 0; n < theBlock.length; n++) {
        drawRect(theBlock[n][0] + px, theBlock[n][1] + py)
    }
}
//移动
var move = function (direct) {
    switch (direct) {
        case 0 ://上：变形
            if (state == 3) {
                state = 0
            } else {
                state++
            }
            theBlock = shaps[rand][state]
            break;
        case 1 ://下：加速
            break;
        case 2 ://左移
            px--
            break;
        case 3 ://右移
            px++
            break;
    }
    init();
    drawBlock()
}
//下落
var down = function () {
    if (checkBottom()) {
        clearInterval(int)
        console.log(theBlock)
        //rects.concat(theBlock)
        for (var i = 0; i < theBlock.length; i++) {
            rects.push([theBlock[i][0] + px, theBlock[i][1] + py])
        }
        px = 0;
        py = 0;
        start()
        return;
    }
    py++
    init()
    drawBlock()
}
//检查是否到底
var checkBottom = function () {
    //四个块中任何一列最下面的块：下面有块时/下面是边界时到底
    var cols = []     //[0,1]
    var downmost = [] //[[0,1],[1,2]]
    for (var i = 0; i < theBlock.length; i++) {
        var x = theBlock[i][0] + px
        if (cols.indexOf(x) == -1) cols.push(x)
    }
    for (var j = 0; j < cols.length; j++) {
        var ymax = 0;
        for (var i = 0; i < theBlock.length; i++) {
            if (theBlock[i][0] + px == cols[j] && theBlock[i][1] > ymax)ymax = theBlock[i][1]
        }
        downmost.push([cols[j], ymax])
    }
    //得到了需要做判断的块downmost,开始判断：
    for (var i = 0; i < downmost.length; i++) {
        var x = downmost[i][0];
        var y = downmost[i][1];
        var ymin = 20;
        for (var j = 0; j < rects.length; j++) {
            if (rects[j][0] == x && rects[j][1] > y && rects[j][1] < ymin)ymin = rects[j][1]
        }

        if (y + py == ymin - 1) {// todo
            return true;
        }

    }
    return false;

}
//键盘监听
document.onkeydown = function (e) {
    var keynum, keychar;
    if (window.event) {       // IE
        keynum = e.keyCode;
    }
    else if (e.which) {       // Netscape/Firefox/Opera
        keynum = e.which;
    }
    keychar = String.fromCharCode(keynum);
    if (['W', 'S', 'A', 'D'].indexOf(keychar) > -1) {
        move(keymap[keychar])
    }
}
window.onload = function () {
    start()
}